<script lang="ts" setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const state = reactive({
    longitude: '',
    latitude: '',
    location: '',
    poiaddress: ''
})
onLoad((options) => {
  if (!options?.poiaddress) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  state.longitude = options.longitude
  state.latitude = options.latitude
  state.location = options.location
  state.poiaddress = options.poiaddress
})
</script>

<template>
  <TnNavbar
    fixed
    bg-color="transparent"
    :bottom-shadow="false"
    :placeholder="false"
  />
  <!-- 地图 -->
  <view class="map">
    <map
      :longitude="state.longitude"
      :latitude="state.latitude"
      :enable-scroll="false"
    />
  </view>
  <!-- 位置内容 -->
  <view class="location-content tn-shadow">
    <view class="content-info">
      <view class="name">{{ state.location }}</view>
      <view class="desc">{{ state.poiaddress }}</view>
    </view>
    <view class="content-icon tn-flex-center">
      <TnIcon name="location-fill" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
/* 地图 start */
.map {
  position: relative;
  width: 100vw;
  height: 100vh;

  map {
    width: 100%;
    height: 100%;
  }
}
/* 地图 end */
/* 位置内容 start */
.location-content {
  position: fixed;
  left: 50%;
  bottom: 200rpx;
  width: calc(100vw - 60rpx);
  transform: translate(-50%, 0);
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-radius: 12rpx;

  .content-info {
    flex: 1;
    .name {
      font-size: 30rpx;
      font-weight: bold;
    }
    .desc {
      font-size: 24rpx;
      color: var(--tn-color-gray);
      margin-top: 10rpx;
    }
  }

  .content-icon {
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 54rpx;
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background-color: var(--tn-color-gray-disabled);
  }
}
/* 位置内容 end */
</style>
